<!--
 * @Author: xurenda <xurenda@qq.com>
 * @HomePage: https://xurenda.top
 * @Github: https://github.com/xurenda
 * @Date: 2019-10-09 22:19:54
 * @LastEditTime: 2019-12-06 22:26:33
 * @FilePath: \elegant-surf\src\views\Home.vue
 -->
<!-- 首页 -->
<template>
<div
  id="home"
  :style="{ backgroundColor: isColor ? backgroundColor : 'transparent' }"
  @click.self="popUpModalBox"
>
  <!-- 诗词展示 -->
  <poetry />
  <!-- 搜索栏 -->
  <search-bar />
  <!-- 日常书签 -->
  <daily-marks />
  <!-- p5.js动态背景 -->
  <p5-background v-if="loadFlag && !isColor" :sketchType="backgroundSketch" />
  <!-- 弹出模态框 -->
  <modal-box :class="{ show: modalBoxShow }" />
  <!-- 页脚 -->
  <app-footer />
</div>
</template>

<script>
// 组件
import Poetry from '@/components/home/Poetry'
import SearchBar from '@/components/home/SearchBar'
import DailyMarks from '@/components/home/DailyMarks'
import P5Background from '@/components/home/P5Background'
import ModalBox from '@/components/home/ModalBox'
import AppFooter from '@/components/home/footer'

import { mapState } from 'vuex'

export default {
  name: 'home',
  components: { Poetry, SearchBar, DailyMarks, P5Background, ModalBox, AppFooter },
  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      modalBoxShow: false, // 模态框是否显示
      loadFlag: true
    }
  },
  computed: {
    ...mapState({
      isColor: state => state.background.isColor, // 是否为纯色背景
      backgroundColor: state => state.background.color, // 背景颜色
      backgroundSketch: state => state.background.sketch, // 背景特效
    })
  },
  methods: {
    /**
     * 弹出模态框
     */
    popUpModalBox() {
      this.modalBoxShow = !this.modalBoxShow
    },
    /**
     * 背景效果发生变化，重载P5Background组件
     */
    reload (){
      this.loadFlag = false
      this.$nextTick(() => this.loadFlag = true)
    }
  }
}
</script>

<style lang="stylus">
#home
  width 100vw
  height 100vh
  display flex
  flex-direction column
  justify-content center
  align-items center
</style>